<script setup lang="ts">
import { HomeFilled,List,Tickets, UserFilled} from '@element-plus/icons-vue'
import{useRouter} from "vue-router";
import {ref} from "vue";
const router = useRouter();
const goSign = () => {
  router.push('/sign')
};
// 获取按钮文本
const getButtonText = () => {
  const userInfo = localStorage.getItem('userInfo');
  if (userInfo) {
    return '个人中心';
  } else {
    return '登录';
  }
};
let userId = ref("")
const userInfoStr = localStorage.getItem('userInfo'); // 获取登录信息
if (userInfoStr) {
  try {
    const userInfo = JSON.parse(userInfoStr); // 解析为对象
    userId = userInfo.id; // 提取用户ID
    // 跳转用户页面
  } catch (error) {
    console.error('解析用户信息失败', error);
    router.push('/sign'); // 解析失败则跳登录
  }
} else {
  router.push('/sign'); // 未登录则跳登录
}
// 点击事件处理
const handleUserClick = () => {
  const userInfo = localStorage.getItem('userInfo');
  if (userInfo) {
    router.push('/user'); // 已登录 → 跳转到用户页
  } else {
    router.push('/sign'); // 未登录 → 跳转到登录页
  }
};
</script>

<template>

<div class = "icons">
  <router-link :to="{path:'/',query:{userId}}" style="text-decoration: none">
  <div class = "icon1">
       <el-icon  style = "font-size: 25px;margin-top: 5px;"><HomeFilled /></el-icon>首页
  </div>
  </router-link>
<router-link :to="{path:'/AppList',query:{userId}}" style="text-decoration: none">
  <div class = "icon2">
       <el-icon @click = "" style = "font-size: 25px;margin-top: 5px"><List /></el-icon>分类
  </div>
</router-link>
  <router-link :to="{path:'/RankingList',query:{userId}}" style="text-decoration: none">
  <div class = "icon3">
       <el-icon @click = "" style = "font-size: 25px;margin-top: 5px"><Tickets /></el-icon>排行榜
  </div>
  </router-link>
  <div  class = "icon4">
       <el-icon @click = "handleUserClick" style = "font-size: 25px;margin-top: 5px;"><UserFilled /></el-icon>{{ getButtonText() }}
  </div>

</div>
  
</template>

<style scoped>

.icons{
  display: flex;
  margin-left: 10px;
  justify-items: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  background: white;
}
.icon1{
  display: flex;
  flex-direction: column;
  font-size: 15px;
  margin-left:20px;
  justify-items: center;
  align-items: center;
  color: black;
}
.icon2{
  display: flex;
  flex-direction: column;
  font-size: 15px;
  margin-left:52px;
  justify-items: center;
  align-items: center;
  color:black;
}
.icon3{
  display: flex;
  flex-direction: column;
  font-size: 15px;
  margin-left:52px;
  justify-items: center;
  align-items: center;
  color:black;
}
.icon4{
  display: flex;
  flex-direction: column;
  font-size: 15px;
  margin-left:40px;
  justify-items: center;
  align-items: center;
}
</style>